<template>
  <!-- 登录 -->
  <div class="login">
    <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
    >
        <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.userName" />
        </el-form-item>
        <el-form-item label="密码" prop="name">
            <el-input v-model="ruleForm.passWord" />
        </el-form-item>
        <el-button @click="handleSubmit(ruleFormRef)">提交</el-button>
    </el-form>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const formSize = ref('default')
let rules = reactive<FormRules>({
    userName:[
        { 
            required: true, 
            message: '请输入用户名', 
            trigger: 'blur' },
    ],
    passWord:[
        { 
            required: true, 
            message: '请输入密码', 
            trigger: 'blur'
        }
    ]
})
let ruleForm =reactive({
    userName:'',
    passWord:''
})
const ruleFormRef = ref<FormInstance>()
// const handleSubmit = async (formEl: FormInstance | undefined) => {
//   if (!formEl) return
//   await formEl.validate((valid, fields) => {
//     if (valid) {
//       console.log('submit!')
//     } else {
//       console.log('error submit!', fields)
//     }
//   })
// }
function handleSubmit(formEl:FormInstance) {
    console.log(formEl,'=')
    // validateLogin(formEl,['userName','passWord'],(err)=>{
    //     if(!err){
    //         let loginFrom = {
                // name: ruleForm.userName,
    //             password: ruleForm.passWord
    //         }
    //         console.log(loginFrom,'=========')
    //         console.lgo('去登录了')
    //     }
    // })
}

// function validateLogin(formEl, arr, callback){
//     let validateArr=[]
//     console.log(formEl,'=============')
//     for(let item in arr){
//         let p = new Promise((resolve, reject)=> {
//             formEl.validate(item, (err) => {
//                 if(!err){
//                     resolve(item)
//                 }else{
//                     reject(err)
//                 }
//             })
//         })
//         validateArr.push(p)
//     }

//     Promise.all(validateArr).then(()=>{
//         callback()
//     }).catch(err =>{
//         callback(err)
//     })
// }
// function handleLogin(){
//     formRef.value.validate( async valid => {
//         if(valid){
//             loading.value = true
//             const { code, message } = await useStore.login(loginForm)
//             loading.value = false
//             if(code === 0){
//                 router.replace(toPath || '/')
//             }else {
//                 message({
//                     message: '登录失败',
//                     type:'error'
//                 })
//             }
//         }else {
//             consoel.log('error submit')
//             return false
//         }
//     } )
// }
</script>

<style>
.login {
    width: 400px;
    height: 300px;
    margin: 50px auto;
    text-align: center;
}
</style>